<template>
  <div class="password_item">
    <div v-show="value4 != 1">
      <input type="text" placeholder="请输入原密码" v-model="value1" />
    </div>
    <div>
      <input type="text" placeholder="请输入新密码" v-model="value2" />
    </div>
    <div>
      <input type="text" placeholder="再次输入新密码" v-model="value3" />
    </div>
    <button
      v-if="(value1 == '' && value4 != 1) || value2 == '' || value3 == ''"
    >
      提交
    </button>
    <button v-else @click="controlPassword" class="buttonActive">提交</button>
  </div>
</template>

<script>
export default {
  // props: ["isCode"],
  data() {
    return {
      isControlPasswordBorder: false,
      value1: "",
      value2: "",
      value3: "",
      value4: 0,
    };
  },
  // mounted() {
  //   console.log(this.isCode);
  // },
  methods: {
    vlaueJs(value) {
      this.value4 = value;
    },
    controlPassword() {
      var that = this;
      if (that.value2 != that.value3) {
        that.$message.error("两次输入的密码不相等，请重新输入");
      } else {
        that.$emit("ControlPasswordBorder", that.value1, that.value2);
        that.value1 = "";
        that.value2 = "";
        that.value3 = "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.password_item {
  padding: 0 30px 10px;
  div {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    input {
      font-size: 14px;
    }
  }
  button {
    width: 100%;
    height: 40px;
    background-color: #ccc;
    border-radius: 6px;
    margin-top: 20px;
    cursor: no-drop;
    transition: all 0.2s;
  }
  .buttonActive {
    cursor: pointer;
    background-color: rgb(68, 162, 255);
    color: #fff;
  }
}
</style>
